<template>
  <el-dialog
    title="员工导入"
    :visible="showDialog"
    width="500px"
    @close="closeDialog"
  >
    <el-row>
      <div class="import-wrapper">
        <div class="import-content">
          <!-- 前端调起浏览器的文件选择能力：type为file的input元素 -->
          <input
            ref="fileInputRef"
            type="file"
            class="file-input"
            @change="fileChange"
          />
          <i class="el-icon-upload"></i>
          <el-button type="text" @click="downloadTemplate"
            >下载导入模板</el-button
          >
          <div>
            <span>将文件拖到此处或 </span>
            <el-button type="text" @click="uploadFile">点击上传</el-button>
          </div>
        </div>
      </div>
    </el-row>
    <el-row type="flex" justify="end">
      <el-button type="primary" size="mini">取消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { downloadTemplate, importEmployee } from "@/api/employee";
import FileSaver from "file-saver";
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    // 点击X和蒙板会触发的事件回调函数
    closeDialog() {
      // 关闭弹窗
      // 通知父组件修改showDialog的值为false
      this.$emit("update:showDialog", false);
    },
    // 下载导入的excel模板
    async downloadTemplate() {
      // 调用下载模板接口
      const res = await downloadTemplate();
      // 下载文件
      FileSaver.saveAs(res, "员工导入模板.xlsx");
    },
    // 点击 “点击上传” 按钮
    uploadFile() {
      // 获取type为file的input元素，调用它身上的click()方法，来调起浏览器的文件选择能力
      this.$refs.fileInputRef.click();
    },
    // 用户选择文件后会触发的事件
    async fileChange(e) {
      console.log(11111);
      // console.log(e);
      // file：用户选择的文件
      const file = e.target.files[0];
      // 创建FormData格式的数据
      const fd = new FormData();
      fd.append("file", file);
      try {
        // 调用导入员工excel接口
        await importEmployee(fd);
        // 刷新表格数据
        this.$emit("getEmployeeList");
        // 关闭弹窗
        this.$emit("update:showDialog", false);
      } finally {
        // 清空表单内容
        this.$refs.fileInputRef.value = "";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.import-wrapper {
  padding: 20px 50px;
  .import-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 360px;
    height: 180px;
    border: 1px dashed #dcdfe6;
    border-radius: 8px;
    .el-icon-upload {
      font-size: 60px;
      color: #c0c4cc;
    }
    span {
      color: #bbb;
    }
    .file-input {
      display: none;
    }
  }
}
</style>
